<template>
	{{dataPower}}
	<a-form ref="formRef" :model="addFormData" class="add_modal"
		:rules="rules">
		<div class="items">
			<div>
				<p>权限字符串</p>
				<a-form-item name="code">
					<MyInput :modelV="addFormData.code" @submit="addFormData.code = $event" />
				</a-form-item>
			</div>
			<div>
				<p>图标地址</p>
				<a-form-item name="icon">
					<MyInput :modelV="addFormData.icon" @submit="addFormData.icon = $event"/>
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div>
				<p>菜单路径</p>
				<a-form-item name="name">
					<MyInput :modelV="addFormData.name" @submit="addFormData.name = $event" />
				</a-form-item>
			</div>
			<div>
				<p>父级id</p>
				<a-form-item name="parentId">
					<a-select v-model:value="addFormData.parentId" placeholder="请选择" :options="$OPTIONS.ROLE_TYPE" />
					<!-- <MyInput :modelV="addFormData.parentId" @submit="addFormData.parentId = $event" /> -->
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div>
				<p>序号</p>
				<a-form-item name="sort">
					<MyInput :modelV="addFormData.sort" @submit="addFormData.sort = $event" />
				</a-form-item>
			</div>
			<div>
				<p>菜单标题</p>
				<a-form-item name="title">
					<MyInput :modelV="addFormData.title" @submit="addFormData.title = $event" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div>
				<p>备注</p>
				<a-form-item name="remark">
					<MyInput :modelV="addFormData.remark" @submit="addFormData.remark = $event" />
				</a-form-item>
			</div>
			<div>
				<p>类型</p>
				<a-form-item name="type">
					<a-select v-model:value="addFormData.type" placeholder="请选择" :options="$OPTIONS.ROLE_TYPE" />
				</a-form-item>
			</div>
		</div>
		<div class="bottom-btn">
			<MyButton class="reaset" @click="$emit('onClose')" title="取消" />
			<MyButton class="submit" @click="onSubmit" title="保存" />
		</div>
	</a-form>
</template>

<script lang="ts" setup>
	import { ref, watch, computed} from 'vue';
	import cloneDeep from 'lodash/cloneDeep';
	import { useOrganization } from '@/store';
	import { createRoleurl } from "@/api/orang";
	import Message from "@/utils/message";
			
	const PROPS = defineProps({
	  formData: {
	    type: Object,
	    default: {},
	  },
	});
	const OrganStore = useOrganization();
	const EMITS = defineEmits(["onClose","success"]);
	const dataPower = computed(()=> OrganStore.$state.powerList);
	
	const formRef = ref();
	const addFormData = ref<any>({});
	const rules = {
	  // name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
	};
	
	const onSubmit = ()=>{
		formRef.value.validate().then(async () => {
			const obj = cloneDeep(addFormData.value);
			if(obj.code && obj.code !== ''){
				const generatePermCode = (str: string) => str.replace(/\//g, ':');
				obj.code = generatePermCode(addFormData.value.code);
			}
			const res = await createRoleurl(obj);
			if(!res) return;
			console.log(obj);
			// let power_ids = '';
			// if(addFormData.value.power){
			// 	const { api, route } = addFormData.value.power;
			// 	const arr = api.concat(route);
			// 	arr.forEach((item,index)=>{
			// 		if(index == arr.length - 1){
			// 			power_ids += item;
			// 		}else{
			// 			power_ids += item +',';
			// 		}
			// 	});
			// }
			//resourceParam
			// console.log(addFormData.value)
			// if(addFormData.value.id){
			// 	const res = await updateRole({ ...addFormData.value,power_ids });
			// 	if(!res) return;
			// 	// organizationStore.getRoleList(true);
			// 	Message.success("更新角色成功");
			// 	EMITS('success');
			// }else{
			// 	const res = await createRole({ ...addFormData.value,power_ids });
			// 	if(!res) return;
			// 	// organizationStore.getRoleList(true);
			// 	Message.success("新增角色成功");
			// 	EMITS('success');
			// }
		}).catch((error: ValidateErrorEntity < FormState > ) => {
			console.log('error', error);
		});
	};
	
	watch(()=>PROPS.formData,()=>{
		addFormData.value = cloneDeep({ ...addFormData.value,...PROPS.formData });
	},{ deep:true, immediate:true });
	
</script>

<style lang="less" scoped>
	@import './index.less';
</style>
